<template>
    <div class="add-group-form">
        <el-form :model="form" label-width="auto" ref="formRef" :rules="rules" style="max-width: 600px">
            <el-form-item label="群组(部门)名称" prop="name">
                <el-input v-model="form.name" />
            </el-form-item>

            <el-form-item label="层级">
                <el-radio-group v-model="level" @change="changeLevel">
                    <el-radio value="1">父级</el-radio>
                    <el-radio value="2">子级</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="所属上级" v-if="isParent" prop="parentId">
                <el-select v-model="form.parentId" placeholder="请选择所属上级" @change="changeParent">
                    <el-option v-for="(item, index) in plist" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="说明">
                <el-input v-model="form.desc" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(formRef)">创建</el-button>
                <el-button @click="goBack">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { save, plist } from '@/api/groups'
import { ElMessage, ElLoading } from 'element-plus'
export default {
    setup () {
        const router = useRouter()
        const formRef = ref()
        const data = reactive({
            form: {
                name: '',
                parentId: '',
                desc: '',
                sortNum: '999',
            },
            level: '1',
            isParent: false,
            plist: []
        })

        const rules = reactive({
            name: [
                { required: true, message: '请输入群组(部门)名称', trigger: 'blur' },
                { max: 100, message: '群组(部门)名称最大长度100', trigger: 'blur' },
            ],
            parentId: [
                { required: true, message: '请选择群组(部门)名称所属上级', trigger: 'change' },
            ],
        })

        const onSubmit = (formRef) => {
            formRef.validate( (valid, fields) => {
                if(valid) {
                    
                    if(data.form.level == '1') {
                        data.form.parentId = '0'
                    }
                    const loading = ElLoading.service({
                        lock: true,
                        text: 'Loading',
                        background: 'rgba(0, 0, 0, 0.7)',
                    })
                    save(data.form).then((res) => {
                        loading.close()
                        if(res.code === 200) {
                            ElMessage({message: '保存成功', type: 'success'})
                            router.push({name: 'indexGroup'})
                        } else {
                            ElMessage.error({message: '保存失败'})
                        }
                    }).catch((e) => {
                        loading.close()
                    })
                    
                } else {
                    //ElMessage.error('Oops, this is a error message.')
                }
            })
            
        }

        const goBack = () => {
            router.push({name: 'indexGroup'})
        }

        onMounted(() => {
            plist().then((res) => {
                if(res.code === 200){
                    data.plist = res.data
                }
            })
        })

        const changeLevel = (v) => {
            if(v == 2) {
                data.form.parentId = ''
                data.isParent = true
            } else {
                data.isParent = false
            }


        }

        const changeParent = (v) => {
            data.form.parentId = v
        }

        return {
            ...toRefs(data),
            rules,
            onSubmit,
            goBack,
            formRef,
            changeLevel,
            changeParent
        }
    }
}
</script>

<style lang="scss" scoped>
.add-group-form {
    padding: 20px;
}
</style>